<template>
  <div class="container">
    <div class="tabs-top">
      <div class="tig">点击右侧按钮，查看您设置后的效果~ <div class="check" @click="goShop">查看效果</div>
      </div>
      <div class="type-tabs">
        <!-- 列表排序 销量、售价、时间、筛选 -->
        <ul>
          <li v-for="(item, index) in tabsTypeData" :key="index" @click="changeSort(index)" :class="tabsCurType == index ? 'on' : ''">
            {{item}}
            <icon v-if="index === 0" class="iconfont icon-xiala-copy" :class="'arrow-' + index + '-' + typeFour"></icon>
            <icon v-if="index === 1" class="iconfont icon-xiala-copy" :class="'arrow-' + index + '-' + typeFir"></icon>
            <icon v-if="index === 2" class="iconfont icon-xiala-copy" :class="'arrow-' + index + '-' + typeSec"></icon>
            <!-- <icon v-if="index === 2" class="iconfont icon-xiala-copy" :class="'arrow-' + index + '-' + typeThr"></icon> -->
          </li>
        </ul>
        <div class="filter-btn-box pad-l-10 pad-r-10" @click="fileterGoodsList">
          <span>筛选</span>
          <img v-if="fileSpace" :src="fileSpace+'/images/goods-list-filter.png'" alt="">
        </div>
      </div>
    </div>
    <div class="height-80"></div>
    <!-- 商品列表 展示区域 -->
    <div v-if="dataNone" class="pad-t-30 mar-t-30 align-c font-14 font-gray">暂无数据</div>
    <div v-else class="list">
      <ul>
        <li v-for="(item, index) in listData" :key="index">
          <div class="centent" @click="pageTo(item)">
            <div class="pic-box">
              <img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" class="pic" alt="">
              <span>{{item.updateTime}}</span>
            </div>
            <div class="info">
              <div class="title">
                <h5><span v-if="item.categoryName">[{{ item.categoryName }}]</span>{{ item.title }}</h5>
              </div>
              <div class="footer">
                <div class="tag flex v-align-c font-12" v-if="item.income && item.income > 0">
                  <label class="label-f">{{getAppInfo.commissionAlias || '分销赚'}}</label>
                  <label class="label-s"><span style="color:#ffe200;">{{ item.income }}</span>元</label>
                </div>
                <div class="money">
                  <span><span style="font-size:14px">￥</span>{{ item.sellPrice }}</span>
                  <span class="nums">已售:&nbsp;&nbsp;{{ item.salesNum }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="btn">
            <span v-if="tabsCur === 1" class="delect" @click="goodsAction(1, item)">删除</span>
            <span v-if="tabsCur === 2" class="delect" @click="goodsAction(1, item)">移除</span>
            <span v-if="tabsCur === 1" class="type" @click="goodsAction(2, item)">编辑商品</span>
            <span v-if="tabsCur === 2" class="type" @click="selCategory(item)">修改分类</span>
            <template v-if="tabsCur === 1">
              <span v-if="item.goodsStatus === 0" class="shangjia" @click="goodsAction(3, item)">上架商品</span>
              <span v-if="item.goodsStatus === 1" class="xiajia" @click="goodsAction(4, item)">下架商品</span>
            </template>
          </div> -->
          <div class="btn pad-t-8 pad-b-8">
            <div v-if="tabsCur === 1" class="type" @click="goodsAction(2, item)">
              <img v-if="fileSpace" :src="fileSpace+'/images/goods-list-edit.png'" alt="">
              <span class="mar-t-4">编辑</span>
            </div>
            <div v-if="tabsCur === 2" class="type" @click="selCategory(item)">
              <span class="mar-t-4">修改分类</span>
            </div>
            <span class="vertical_line"></span>
            <div v-if="tabsCur === 1" class="delect" @click="goodsAction(1, item)">
              <img v-if="fileSpace" :src="fileSpace+'/images/goods-list-del.png'" alt="">
              <span class="mar-t-4">删除</span>
            </div>
            <div v-if="tabsCur === 2" class="delect" @click="goodsAction(1, item)">
              <img v-if="fileSpace" :src="fileSpace+'/images/goods-list-del.png'" alt="">
              <span class="mar-t-4">移除</span>
            </div>
            <span class="vertical_line"></span>
            <div v-if="tabsCur === 1" class="xiajia" @click="goodsAction(4, item)">
              <template v-if="item.goodsStatus === 1">
                <img v-if="fileSpace" :src="fileSpace+'/images/goods-list-off.png'" alt="">
                <span v-if="item.goodsStatus === 1" class="mar-t-4">下架</span>
              </template>
              <template v-if="item.goodsStatus === 0">
                <img v-if="fileSpace" :src="fileSpace+'/images/goods-list-on.png'" alt="">
                <span class="shangjia" @click="goodsAction(3, item)">上架商品</span>
              </template>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="addBtnShow" class="height-62"></div>
    <div v-if="addBtnShow" class="add-btn" @click="addGoods"><span :style="{'background-color': globalStyle.color2, color: globalStyle.styleType === 10 ? globalStyle.color4: '#fff'}">{{ addTxtBtn }}</span></div>
    <div class="popup-bg" v-if="popupBoolean" @click="popupClose"></div>
    <!--修改分销商品类目-->
    <upper-category ref="upperCategory"></upper-category>

    <!-- 筛选 -->
    <div class="filter-main-box" v-if="showFilterBox">
      <div class="layout-box" @click="showFilterBox = false"></div>
      <div class="filter-area">
        <div class="filter-input-box mar-t-15">
          <!-- <input type="text" placeholder="搜索商品名称" v-model="listQuery.goodsTitle" @focus="listQuery.goodsTitle = '';noSelectSort = false"> -->
          <van-search placeholder="搜索商品名称" background="#fff" @change="changeInput" shape="round" :value="listQuery.goodsTitle" @focus="listQuery.goodsTitle = '';noSelectSort = false"/>
        </div>
        <div class="filter-menu-box pad-l-15 pad-r-15 pad-t-20 pad-b-15">
          <h5>分类<span v-if="noSelectSort">至少选择一个分类</span></h5>
          <ul>
            <li v-for="(item, index) in categoryList" :key="index" :class="[item.active?'active-menu':'', (index+1)%3 == 0 ? '' : 'mar-r-15']" @click="selectSort(item)">
              {{item.categoryName}}
            </li>
          </ul>
        </div>
        <div class="btn-group pad-b-10">
          <span class="resetBtn mar-l-15" @click="resetOperate">重置</span>
          <span class="sureBtn mar-l-10" :style="'background-color: '+globalStyle.color2+';'" @click="sureOperate">确定</span>
        </div>
      </div>
    </div>
    <!-- <div>
      <sort-menu ref="showBox" :background="globalStyle.color2" @resetOperate="resetOperate" @sureOperate="sureOperate"></sort-menu>
    </div> -->
  </div>
</template>

<script>
import {
  getGoodsManagerGoodsCount,
  pagingGoodsManagerGoods,
  deleteProjectGoods,
  deleteUserGoods,
  updateUserGoodsStatus
} from '@/api/shop'
import {
  updateUpperShelfFlag,
  getShowEnterpriseAndSellFlag
} from '@/api/distribution'
import UpperCategory from '@/components/UpperCategory'
import SortMenu from '../components/SortMenu.vue'
export default {
  components: { UpperCategory, SortMenu },
  data() {
    return {
      tabsCur: 1, // tabsCur 自营:1 分销：2
      tabsIndex: null,
      statusIndex: 0,
      categoryIndex: 0,
      tabs: ['自营商品', '分销商品'],
      tabsTypeData: ['时间', '销量', '售价'],
      tabsData: [
        {
          name: '全部商品',
          nums: 0
        }, {
          name: '全部分类',
          nums: 0
        }
      ],
      categoryId: '',
      infoCount: {},
      infoStatus: [],
      categoryList: [], // categoryList 存储分类菜单信息
      categoryType: 1,
      tabsCurType: 0,
      popupFir: false,
      popupSec: false,
      popupBoolean: false,
      typeFir: '',
      typeSec: '',
      typeThr: '',
      typeFour: 1, // 默认按商品创建时间降序
      listQuery: {
        memberId: '',
        shopType: '',
        categoryId: '',
        categoryIds: '',
        goodsTitle: '',
        goodsStatus: '',
        orderType: '',
        currentPage: 1,
        size: 15
      },
      listData: [],
      pullLoad: {
        loading: false,
        finished: false
      },
      dataNone: false,
      shareCurrentItem: {}, // 当前选中的分类信息
      shareCurrentIndex: null, // 当前选中的分类索引
      goodsCurrentItem: {},
      goodsCurrentIndex: null,
      pageCurrent: true,
      enterpriseId: null,
      enterpriseAndSellFlag: {
        showSellFlag: null
      },
      addBtnShow: true,
      addTxtBtn: '+新增商品',
      showFilterBox: false,
      goodsSort: [],
      noSelectSort: false,
      globalStyle: {},
      timeer: true,
      getAppInfo: {}
    }
  },
  onLoad(option) {

  },
  // 监听上传是否完成
  watch: {},
  onShow() {
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
    this.globalStyle = this.getAppInfo.style
    if (this.pageCurrent === true) {
      this.initEls()
    }
  },
  mounted() {
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.goodsManagerList()
    }
  },
  onPullDownRefresh() {
    this.$utils.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 1500
    })
    setTimeout(() => {
      this.$pt.hideToast()
      this.$pt.stopPullDownRefresh()
      if (this.goodsCurrentIndex) {
        this.goodsCount(this.tabsCur)
        this.changeStatus(this.goodsCurrentItem, this.goodsCurrentIndex)
      } else if (this.shareCurrentIndex) {
        this.goodsCount(this.tabsCur)
        this.changeCategory(this.shareCurrentItem, this.shareCurrentIndex)
      } else if (!this.goodsCurrentIndex && !this.shareCurrentIndex) {
        this.goodsCount(this.tabsCur, true)
        this.tabsClick(this.tabsCur)
      }
    }, 500)
  },
  methods: {
    initEls() {
      if (this.tabsCur === 1) {
        this.tabsClick(1)
      } else {
        this.tabsClick(2)
      }
      this.popupCur = ''
    },
    changeInput(e) {
      this.listQuery.goodsTitle = e.mp.detail
    },
    goShop() {
      if (!this.getAppInfo.shopAppId) return
      this.$pt.navigateToMiniProgram({
        appId: this.getAppInfo.shopAppId,
        path: 'pages/home/main'
      })
    },
    pageTo(item) {
      this.pageCurrent = false
      if (!this.getAppInfo.shopAppId) return
      this.$pt.navigateToMiniProgram({
        appId: this.getAppInfo.shopAppId,
        path: 'pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=' + (this.tabsCur === 1 ? '10' : '30')
      })
    },
    goodsCount(type, showDefault) {
      this.infoStatus = [
        {
          categoryName: '全部商品',
          goodsCount: 0
        }, {
          categoryName: '上架商品',
          goodsCount: 0
        }, {
          categoryName: '下架商品',
          goodsCount: 0
        }
      ]
      getGoodsManagerGoodsCount({
        memberId: this.getCustomerId,
        shopType: type
      }).then((response) => {
        if (response.isError) return
        this.infoCount = response.data
        // 全部商品数据
        this.tabsData[0].nums = this.getInfoStatusCount(this.tabsData[0].name, this.infoCount)
        this.infoStatus[0].goodsCount = this.infoCount.allGoodsCount
        this.infoStatus[1].goodsCount = this.infoCount.upGoodsCount
        this.infoStatus[2].goodsCount = this.infoCount.downGoodsCount
        // 全部分类数据
        this.categoryList = response.data.categoryList
        for (const item of this.categoryList) {
          this.$set(item, 'active', !('categoryId' in item))
        }
        this.tabsData[1].nums = this.getCategoryCount(this.tabsData[1].name, this.categoryList)
        if (showDefault) {
          // 切换自营商品，分销商品tab时，显示全部数据
          this.tabsData[0].name = this.infoStatus[0].categoryName
          this.tabsData[0].nums = this.infoStatus[0].goodsCount
          this.tabsData[1].name = this.categoryList[0].categoryName
          this.tabsData[1].nums = this.categoryList[0].goodsCount
        }
      }).catch(() => {
      })
    },
    getInfoStatusCount(name, infoCount) {
      if (this.infoStatus[0].categoryName === name) {
        return infoCount.allGoodsCount
      }
      if (this.infoStatus[1].categoryName === name) {
        return infoCount.upGoodsCount
      }
      if (this.infoStatus[2].categoryName === name) {
        return infoCount.downGoodsCount
      }
      return 0
    },
    getCategoryCount(name, categoryList) {
      let goodsCount = 0
      categoryList.forEach(category => {
        if (category.categoryName === name) {
          goodsCount = category.goodsCount
        }
      })
      return goodsCount
    },
    pageAdd() {
      this.listData = []
      this.listQuery.currentPage = 1
      this.pullLoad.finished = false
    },
    goodsManagerList() {
      this.$pt.showLoading({
        title: '加载中',
        mask: true
      })
      this.listQuery.memberId = this.getCustomerId
      this.listQuery.shopType = this.tabsCur // 判断是自营还是分销  自营：1  分销：2
      // orderType列表排序类型(11.销量升序 10销量降序 21.售价升序 20.销量降序 31.佣金升序 30佣金降序 40.创建时间降序 41.创建时间升序)
      if (this.listQuery.orderType === 10) {
        this.listQuery.orderType = 11
      } else if (this.listQuery.orderType === 11) {
        this.listQuery.orderType = 10
      } else if (this.listQuery.orderType === 20) {
        this.listQuery.orderType = 21
      } else if (this.listQuery.orderType === 21) {
        this.listQuery.orderType = 20
      } else if (this.listQuery.orderType === 30) {
        this.listQuery.orderType = 31
      } else if (this.listQuery.orderType === 31) {
        this.listQuery.orderType = 30
      } else if (this.listQuery.orderType === 40) {
        this.listQuery.orderType = 41
      } else if (this.listQuery.orderType === 41) {
        this.listQuery.orderType = 40
      }
      pagingGoodsManagerGoods(this.listQuery).then((response) => {
        this.$pt.hideLoading()
        if (response.isError) return
        this.dataNone = false
        response.data.records.forEach(item => {
          this.listData.push(item)
        })
        this.listQuery.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
        if (response.data.records.length === 0) {
          this.dataNone = true
        }
      }).catch(() => {
      })
    },
    tabsClick(e) {
      this.tabsCur = e
      this.categoryType = e
      if (this.tabsCur === 1) {
        this.addTxtBtn = '+新增商品'
        this.tabsTypeData = ['时间', '销量', '售价']
        this.addBtnShow = true
      } else {
        this.getShowEnterpriseAndSellFlag()
        this.tabsTypeData = ['销量', '售价', '佣金']
      }
      this.shareCurrentItem = {}
      this.shareCurrentIndex = null
      this.goodsCurrentItem = {}
      this.goodsCurrentIndex = null
      this.categoryList = []
      this.popupBoolean = false
      this.popupFir = false
      this.popupSec = false
      this.pageAdd()
      this.listQuery.shopType = this.tabsCur // 自营 分销
      this.listQuery.categoryId = ''
      this.listQuery.goodsStatus = ''
      this.listQuery.orderType = 41 // 商品排序 默认按最新创建时间
      this.tabsCurType = null
      this.popupFir = false
      this.popupSec = false
      this.popupBoolean = false
      this.goodsCount(this.tabsCur, true)
      this.goodsManagerList()
    },
    subTabsClick(index) {
      this.tabsIndex = index
      if (index === 0) {
        this.popupFir = !this.popupFir
        this.popupSec = false
      } else {
        this.popupSec = !this.popupSec
        this.popupFir = false
      }
      if (this.popupFir === true || this.popupSec === true) {
        this.popupBoolean = true
      } else {
        this.popupBoolean = false
      }
    },
    changeStatus(item, index) {
      this.goodsCurrentItem = item
      this.goodsCurrentIndex = index
      this.statusIndex = index
      this.popupBoolean = false
      this.popupFir = false
      this.popupSec = false
      switch (index) {
        case 0:
          this.listQuery.goodsStatus = ''
          break
        case 1:
          this.listQuery.goodsStatus = index
          break
        case 2:
          this.listQuery.goodsStatus = 0
          break
      }
      this.tabsData[0].name = item.categoryName
      this.tabsData[0].nums = item.goodsCount
      this.pageAdd()
      this.goodsManagerList()
    },
    changeCategory(item, index, list) {
      this.shareCurrentItem = item // 当前选中的分类信息
      this.shareCurrentIndex = index // 当前选中的分类索引
      this.categoryIndex = index
      // this.popupBoolean = false
      // this.popupFir = false
      // this.popupSec = false
      // if (item.categoryId === undefined) {
      //   item.categoryId = ''
      // }
      // this.listQuery.categoryId = item.categoryId
      // this.tabsData[1].name = item.categoryName
      // this.tabsData[1].nums = item.goodsCount
      this.listQuery.categoryIds = list
      this.pageAdd()
      this.goodsManagerList()
    },
    changeSort(index) {
      this.tabsCurType = index
      // 排序类型(11.销量升序 10销量降序 21.售价升序 20.销量降序 31.佣金升序 30佣金降序 40.创建时间降序 41.创建时间升序)
      switch (index) {
        default:
        case 1:
          this.typeFir = this.typeFir ? 0 : 1
          this.typeSec = ''
          this.typeFour = ''
          this.listQuery.orderType = Number('1' + this.typeFir)
          break
        case 2:
          this.typeFir = ''
          this.typeSec = this.typeSec ? 0 : 1
          this.typeFour = ''
          this.listQuery.orderType = Number('2' + this.typeSec)
          break
        case 0:
          this.typeFir = ''
          this.typeSec = ''
          this.typeFour = this.typeFour ? 0 : 1
          this.listQuery.orderType = Number('4' + this.typeFour)
          break
        // case 2:
        //   this.typeFir = ''
        //   this.typeSec = ''
        //   this.typeThr = this.typeThr ? 0 : 1
        //   this.listQuery.orderType = Number('3' + this.typeThr)
        //   break
      }
      this.pageAdd()
      this.goodsManagerList()
    },
    // 删除微店商品
    deleteUserGoods(goodsId) {
      const that = this
      this.$pt.showModal({
        content: '确定要这样操作吗?',
        success(res) {
          if (res.confirm) {
            deleteUserGoods(goodsId).then(response => {
              that.$utils.showToast({ title: '操作成功' })
              setTimeout(() => {
                that.pageAdd()
                that.goodsManagerList()
                that.goodsCount(that.tabsCur)
              }, 500)
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log('点击了取消')
          }
        }
      })
    },
    // 删除分销商品
    deleteProjectGoods(goodsId) {
      const that = this
      this.$pt.showModal({
        content: '确定要这样操作吗?',
        success(res) {
          if (res.confirm) {
            deleteProjectGoods({
              goodsId: goodsId,
              memberId: this.getCustomerId
            }).then(response => {
              if (response.isError) return
              that.$utils.showToast({ title: '操作成功' })
              setTimeout(() => {
                that.pageAdd()
                that.goodsManagerList()
                that.goodsCount(that.tabsCur)
              }, 500)
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log('用户取消')
          }
        }
      })
    },
    // 商品上、下架
    updateGoodsStatus(item, goodsId, goodsStatus) {
      if (goodsStatus === 0) {
        goodsStatus = 1
      } else {
        goodsStatus = 0
      }
      const that = this
      this.$pt.showModal({
        content: '确定要这样操作吗？',
        success(res) {
          if (res.confirm) {
            if (that.tabsCur === 1) {
              updateUserGoodsStatus({
                goodsId: goodsId,
                goodsStatus: goodsStatus
              }).then((response) => {
                if (response.isError) return
                that.$utils.showToast({ title: '操作成功' })
                setTimeout(() => {
                  that.pageAdd()
                  that.goodsManagerList()
                  that.goodsCount(that.tabsCur)
                }, 500)
              }).catch(() => {
              })
            } else {
              // 分销商品下架
              updateUpperShelfFlag({
                goodsId: goodsId,
                memberId: that.getMemberId,
                upperShelfFlag: goodsStatus
              }).then((response) => {
                if (response.isError) return
                that.$utils.showToast({ title: '操作成功' })
                setTimeout(() => {
                  that.pageAdd()
                  that.goodsManagerList()
                  that.goodsCount(that.tabsCur)
                }, 500)
              }).catch(() => {
              })
            }
          } else if (res.cancel) {
            console.log('用户取消')
          }
        }
      })
    },
    goodsAction(type, item) {
      if (this.timeer) {
        let goodsId = item.goodsId
        switch (type) {
          case 1:
            if (this.tabsCur === 1) {
              this.deleteUserGoods(goodsId)
            } else {
              this.deleteProjectGoods(goodsId)
            }
            break
          case 2:
            this.$pt.navigateTo({ url: '/pages/home/edit/main?goodsId=' + goodsId })
            break
          case 3:
            this.updateGoodsStatus(item, goodsId, 0)
            break
          case 4:
            this.updateGoodsStatus(item, goodsId, 1)
            break
        }
        this.timeer = false
        let that = this
        setTimeout(function() {
          that.timeer = true
        }, 500)
      }
    },
    popupClose() {
      this.popupBoolean = false
      this.popupFir = false
      this.popupSec = false
    },
    selCategory(item) {
      const typeCat = 1
      this.$refs.upperCategory.selCategory(item.goodsId, true, typeCat)
    },
    getShowEnterpriseAndSellFlag() {
      // 用来判断企业库与分销库展示
      this.addTxtBtn = ''
      getShowEnterpriseAndSellFlag(this.getCustomerId).then(response => {
        if (response.isError) return
        this.enterpriseAndSellFlag = response.data
        if (!this.enterpriseAndSellFlag.showSellFlag && this.getEnterpriseId) {
          this.addBtnShow = false
        } else {
          this.addTxtBtn = '进入分销库'
        }
      })
    },
    addGoods() {
      if (this.tabsCur === 2) {
        this.$pt.navigateTo({ url: '/pages/personal/distribution/list/main' })
        return
      }
      this.$pt.navigateTo({ url: '/pages/home/edit/main?categoryId=' + this.categoryId })
    },
    fileterGoodsList() {
      this.showFilterBox = true
      // this.$refs.showBox.showBox()
    },
    // 根据选择的分类和商品筛选栏选条件 时间/销量/售价等 展示商品列表
    // 选择完商品分类 点击确定
    sureOperate() {
      this.tabsCurType = ''
      this.typeFir = ''
      this.typeSec = ''
      this.typeFour = 1
      this.listQuery.orderType = 41
      let tempSort = []
      console.log(this.listQuery.goodsTitle)
      for (const item of this.categoryList) {
        if (item.active) {
          tempSort.push(item.categoryId)
        }
      }
      if (tempSort.length === 0 && this.listQuery.goodsTitle === '') {
        this.noSelectSort = true
      } else {
        let idsStr = tempSort.join(',')
        this.changeCategory('', 1, idsStr)
        this.showFilterBox = false
      }
    },
    // 点击重置按钮
    resetOperate() {
      this.listQuery.goodsTitle = ''
      for (const item of this.categoryList) {
        if (item.categoryName !== '全部分类') {
          item.active = false
        } else {
          item.active = true
        }
      }
      this.sureOperate()
    },
    // 选择分类
    selectSort(item) {
      item.active = !item.active
      this.noSelectSort = false
      if (item.categoryName === '全部分类' && item.active) {
        for (const val of this.categoryList) {
          if (val.categoryName !== '全部分类') {
            val.active = false
          }
        }
      } else {
        if (item.active) {
          for (const val of this.categoryList) {
            if (val.categoryName === '全部分类') {
              val.active = false
            }
          }
        }
      }
    },
    handleClick() {

    }
  }
}
</script>

<style lang="less" scoped>
/deep/ ._van-search {
  .van-search__field {
    border-radius: 32rpx;
  }
  .van-cell{
    background: #f2f2f2;
  }
}
.tag {
  line-height: 1.3;
  .label-f {
    background: #fed807;
    color: #333;
    padding: 2px 5px;
  }
  .label-s {
    background: #272727;
    color: #fff;
    padding: 2px 5px;
    // min-width: 60px;
    box-sizing: border-box;
    span {
      color: #ffc81b;
      font-style: normal;
    }
  }
}
.tig {
  padding-left: 20px;
  padding-right: 8px;
  height: 30px;
  background: #f5f5f5;
  color: #666666;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 6px solid #f6f6f6;
  .check {
    width: 140rpx;
    height: 44rpx;
    font-size: 24rpx;
    color: #333333;
    background: #ffe200;
    border-radius: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .uncheck {
    width: 85px;
    height: 23px;
    font-size: 12px;
    color: #fdfdfd;
    background: #cccccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.tabs-list {
  .icon-xiala-copy {
    color: #333333;
  }
}
.icon-xiala-copy {
  color: #999999;
  font-size: 10px;
  transform: rotate(180deg);
  margin: 2px 0 0 5px;
  &.arrow-0-0 {
    transform: rotate(0deg);
  }
  &.arrow-0-1 {
    transform: rotate(180deg);
  }
  &.arrow-1-0 {
    transform: rotate(0deg);
  }
  &.arrow-1-1 {
    transform: rotate(180deg);
  }
  &.arrow-2-0 {
    transform: rotate(0deg);
  }
  &.arrow-2-1 {
    transform: rotate(180deg);
  }
}
.tabs-top {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 20;
}
.popup-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 19;
}
.tabs {
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  ul {
    width: 231px;
    height: 33px;
    display: flex;
    overflow: hidden;
    border-radius: 100px;
    border-bottom: solid 1px #ececec;
    li {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      color: #0a0a0a;
      font-size: 14px;
      &.on {
        background: #fed502;
        color: #060a21;
      }
    }
  }
}
.tabs-list {
  height: 47.5px;
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  box-sizing: border-box;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 20.5px;
    top: 50%;
    left: 50%;
    margin-left: -0.5px;
    margin-top: -10.25px;
    background: #e4e4e4;
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 15px;
    &.on {
      color: #f94035;
      .icon-xiala-copy {
        color: #f94035;
      }
    }
  }
}
.type-tabs {
  width: 100%;
  height: 43px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  ul {
    flex: 2;
    display: flex;
    height: 100%;
    li {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #9a9a9a;
      &.on {
        color: #343434;
        .icon-xiala-copy {
          color: #343434;
        }
      }
    }
  }
  .filter-btn-box {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    height: 38rpx;
    border-left: 1px solid #eeeeee;
    width: 100rpx;
    justify-content: center;
    color: #9a9a9a;
    img {
      width: 24rpx;
      height: 23rpx;
    }
  }
}
.scroll-category {
  width: 100%;
  // height: 380px;
}
.operate-box {
  display: flex;
  justify-content: space-between;
}
.genre-item {
  position: absolute;
  left: 0;
  right: 0;
  top: 102px;
  z-index: 99991;
  border-top: #e4e4e4 1px solid;
  li {
    height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333333;
    border-top: 1px solid #e4e4e4;
    &.on {
      color: #f94035;
    }
    &:first-child {
      border-top: none;
    }
  }
}
.list {
  li {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    background-color: #fff;
    padding-left: 7px;
    padding-right: 7px;
    border-bottom: #f6f6f6 12px solid;
    .centent {
      display: flex;
      .info {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 230px;
        margin-left: 10px;
        height: 120px;
      }
    }
    .title {
      h5 {
        font-size: 14px;
        color: #333;
        height: 38px;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
        span {
          color: #ff4800;
        }
      }
      .nums {
        font-size: 14px;
        color: #aeaeae;
      }
    }
    .footer {
      .money {
        // font-size: 14px;
        // color: #e75041;
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > span:nth-child(1) {
          font-size: 24px;
          color: #eb4e4e;
        }
        & > span:nth-child(2) {
          font-size: 14px;
          color: #999999;
        }
      }
      p {
        font-size: 14px;
        color: #ff6600;
      }
    }
    .pic-box {
      position: relative;
      .pic {
        width: 120px;
        height: 120px;
        border-radius: 10rpx;
      }
      span {
        position: absolute;
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        font-size: 22rpx;
        bottom: 0;
        width: 100%;
        padding-top: 17rpx;
        padding-bottom: 17rpx;
        border-bottom-left-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
      }
    }
    .btn {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-top: 1px solid #eeeeee;
      margin-top: 8px;
      .vertical_line {
        height: 48rpx;
        width: 1px;
        background: #eeeeee;
      }
      & > div {
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        &.delect {
          color: #666666;
          image {
            width: 36rpx;
            height: 38rpx;
          }
        }

        &.type {
          color: #666666;
          image {
            width: 32rpx;
            height: 32rpx;
          }
        }
        &.shangjia {
          color: #666666;
        }
        &.xiajia {
          color: #666666;
          image {
            width: 36rpx;
            height: 33rpx;
          }
        }
        span {
          height: 100%;
          box-sizing: border-box;
          font-size: 12px;
          &:first-child {
            margin-left: 0;
          }
        }
      }
    }
  }
}
.add-btn {
  height: 107rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  span {
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.filter-main-box {
  .layout-box {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
  }
  .filter-area {
    width: 600rpx;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 21;
    .filter-input-box {
      input {
        width: 542rpx;
        background: #f5f5f5;
        border-radius: 32rpx;
        margin: 0 auto;
        height: 64rpx;
        text-align: center;
      }
    }
    .filter-menu-box {
      h5 {
        font-size: 30rpx;
        color: #343434;
        font-weight: 700;
        span {
          font-size: 24rpx;
          color: #f00;
          margin-left: 10rpx;
          font-weight: 600;
        }
      }
      ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        font-size: 24rpx;
        li {
          width: 152rpx;
          height: 64rpx;
          background: #f5f5f5;
          border: 1px solid #ffe200;
          border-radius: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          margin-top: 20rpx;
          border: 1px solid #fff;
        }
        .active-menu {
          background: #fffbd8;
          border: 1px solid #ffe200;
          border-radius: 32px;
        }
      }
    }
    .btn-group {
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-around;
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        color: #343434;
        font-weight: 700;
      }
      .resetBtn {
        width: 215rpx;
        height: 88rpx;
        background: #f5f5f5;
        border-radius: 44rpx;
      }
      .sureBtn {
        width: 307rpx;
        height: 88rpx;
        // background: #ffe100;
        border-radius: 44rpx;
      }
    }
  }
}
</style>
